<template>
  <div>
    
      <a-breadcrumb class="quarterly">
        <a-breadcrumb-item> 数据中心 </a-breadcrumb-item>
        <a-breadcrumb-item style="color:#40b1e7;">孵化器季报</a-breadcrumb-item>
      </a-breadcrumb>
      <div class="Tboos">
        <p>填报时间：请各众创空间必于报告期末（3 月 31 日、6 月 30 日、9 月 30 日）前填报。</p>
        <a-button class="button" type="primary" >
          
        </a-button>
      </div>
    <!-- 步骤条 -->
      <div>

        <a-steps :current="current" class="steps-current">
          <a-step v-for="item in steps" :key="item.title" :title="item.title" />
        </a-steps>
        <div class="steps-content" v-if="steps[current].content == 1">
          <!-- {{ steps[current].content }} -->
          <One></One>
        </div>
        <div class="steps-content" v-else-if="steps[current].content == 2">
          <Tow></Tow>
        </div>
        <div class="steps-content" v-else ="steps[current].content == 3">
          <Three></Three>
        </div>


        <div class="steps-action">
          <a-button v-if="current < steps.length - 1" type="primary" @click="next">
            下一步
          </a-button>
          <a-button
            v-if="current == steps.length - 1"
            type="primary"
            @click="$message.success('提交成功！')">
            提交
          </a-button>
          <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
            上一步
          </a-button>
        </div>
      </div>
  </div>
</template>

<script>
import One from '@/views/home/index/One.vue'
import Tow from '@/views/home/index/Tow.vue'
import Three from '@/views/home/index/Three.vue'

export default {
  components:{
    One,
    Tow,
    Three
  },
  template:``,
  data() {
    return {
      current: 0,
      steps: [
        {
          title: '',
          content: '1',
        },
        {
          title: '',
          content:'2',
        },
        {
          title: '',
          content: '3',
        }
      ]
    };
  },
  methods: {
    next() {
      this.current++;
    },
    prev() {
      this.current--;
    },
  },
};
</script>

<style lang="scss" scoped>
.steps-current{
  width: 1000px;
  margin: 0 auto;
  margin-top:70px;
  margin-bottom:20px;
}
.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  // text-align: center;
  padding-top:20px;
  width: 1000px;
  margin:0 auto;
}
.steps-action {
  margin-top: 24px;
  margin-left:100px;
}
.quarterly{
  margin-top:30px;
  margin-left:50px;
}
.Tboos{
  p{
    color: #fc7675;
    margin-top:10px;
    margin-left:50px;
    float: left;
  }
  .button{
    float: right;
    margin-right:20px;
    font-weight:500;
  }
}
</style>